<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图demo</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F4VxOyGMo84zqM64v4hdXy1t"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<style>
#map22 input[type="button"]{
			background-color: #0D9BF2;
			height:25px;
			text-align:center;
			line-height:25px;
			color:#fff;
			font-size:12px;
			border-radius:3px;
			outline: none;
			border:0;
			cursor:pointer;
}

#map22 input[type="button"].red{background-color:#f00;color:#fff;}
	</style>
  </head>
  
  <body>
    <div style="width:350px;height:900px;border:#ccc solid 1px;float:left;margin-right:10px;padding:8px;" id="map22">
		<input type="button" value="点点" onclick="diandian()" />
		<input type="button" value="画线" onclick="ta_add()" />
		<input type="button" class="red" value="保存路径" onclick="roadSearch()" />
		<br/><br/>
		临时坐标点:
		<textarea style="width:340px;height:300px;" id="pointlist_temp"></textarea>
	</div>
    <!--百度地图容器-->
    <div style="width:1500px;height:900px;border:#ccc solid 1px;font-size:12px;float:left;" id="map"></div>
  </body>
  <script type="text/javascript">
	var isDianDian = false;
	var pointlist_temp = $('#pointlist_temp');
	var pointarray_temp = [];

	function diandian(){
		if(isDianDian){
			alert('已经可以点点啦,去地图上选取吧!');
		}else{
			map.addEventListener("click",function(e){
				console.log(e.point.lng + "," + e.point.lat);
				//pointarray_temp.push({lng:e.point.lng,lat:e.point.lat});
				pointarray_temp.push( e.point.lng +','+ e.point.lat);
				pointlist_temp.val(pointarray_temp.join('\n'));
			});
			alert('去地图上点点吧!');
		}
		isDianDian = true;
		pointlist_temp.val();
	}
	function drawline(){
		
	}

	function ta_add(lng,lat){
		alert(pointlist_temp.val());
	}
	
    function addMapOverlay(){
		//加labels
      var labels = [
        {position:{lng:117.17745,lat:39.080759},content:"我的标记"}
      ];
      for(var index = 0; index < labels.length; index++){
        var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
        var label = new BMap.Label(labels[index].content,opt);
        map.addOverlay(label);
      };

		//加路径
      var plOpts = [
        {strokeColor:"#00f",strokeWeight:"4",strokeOpacity:"0.4"}
      ];
      var plPath = [
        [
          new BMap.Point(117.174288,39.081585),
          new BMap.Point(117.177576,39.078014),
          new BMap.Point(117.18169,39.081249),
          new BMap.Point(117.18169,39.081249),
          new BMap.Point(117.18169,39.081249)
        ],
      ];
      for(var index = 0; index < plOpts.length; index++){
        var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
        map.addOverlay(polyline);
      }
    }







	//初始化
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(117.178852,39.079737),17);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_METRIC);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
</html>